<template>
  <div class="slide-container">
    <div style="position: absolute;top:0;left:0">{{beforeTxt}}</div>
    <el-slider v-model="value" @change="handleChange"></el-slider>
    <div style="position: absolute;top:0;right:0">{{afterTxt}}</div>
  </div>
</template>

<style lang="less">
.slide-container {
  display: flex;
  width: 100%;
  height: 20px;
  justify-content: space-between;
  font-size: 16px;
  color: #fff;
  padding: 0 30px;
  position: relative;
  box-sizing: border-box;
  .el-slider {
    width: 100%;
    .el-slider__runway {
      background-color: #574967;
      margin: 0;
      margin-top: 8px;
    }
    .el-slider__bar {
      background: linear-gradient(to right, #DD79F5 , #8354FF);
    }
    .el-slider__button {
      width: 12px;
      height: 12px;
      background-color: #8a22ff;
      border: 5px solid #fff;
      &:hover {
        box-shadow: 0 0 20px #fff;
      }
    }
  }
}
</style>

<script>
export default {
  props: ['setValue', 'beforeTxt', 'afterTxt'],
  data () {
    return {
      value: 0
    }
  },
  created () {
    this.value = this.setValue
  },
  methods: {
    handleChange () {
      this.$emit('getSliderValue', this.value)
    }
  }
}
</script>
